<!-- eslint-disable vue/html-indent -->
<template>
  <div class="body">
    <div class="content">
      <el-row>
        <el-col :span="6">
          <div class="cell">
            <span
              style="
                color: rgb(96, 98, 102);
                font-weight: 700;
                margin-right: 10px;
              "
            >
              标签名称
            </span>
            <el-input
              v-model="enterpriseList.tags"
              placeholder="请输入内容"
              style="width: 250px"
            />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="cell">
            <span
              style="
                color: rgb(96, 98, 102);
                font-weight: 700;
                margin-right: 10px;
              "
            >
              城市
            </span>
            <el-select
              v-model="enterpriseList.province"
              placeholder="请选择"
              style="margin-right: 40px; width: 250px"
              @change="citychoose"
            >
              <el-option
                v-for="item in province"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="cell">
            <span
              style="
                color: rgb(96, 98, 102);
                font-weight: 700;
                margin-right: 10px;
              "
            >
              地区
            </span>
            <el-select
              v-model="enterpriseList.city"
              placeholder="请选择"
              style="margin-right: 40px; width: 250px"
              :disabled="!enterpriseList.province"
            >
              <el-option
                v-for="item in city"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="cell">
            <span
              style="
                color: rgb(96, 98, 102);
                font-weight: 700;
                margin-right: 10px;
              "
            >
              企业简称
            </span>
            <el-input
              v-model="enterpriseList.shortName"
              placeholder="请输入内容"
              style="width: 250px"
            />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <div class="cell">
            <span
              style="
                color: rgb(96, 98, 102);
                font-weight: 700;
                margin-right: 10px;
                margin-left: 30px;
              "
            >
              状态
            </span>
            <el-select
              v-model="enterpriseList.state"
              placeholder="请选择"
              style="margin-right: 40px; width: 250px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="17">
          <div
            class="cell"
            style="display: flex; justify-content: space-between"
          >
            <span>
              <el-button @click="purge">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </span>
            <span style="margin-right: 60px">
              <el-button type="success" icon="el-icon-edit" @click="addTo">
                新增用户
              </el-button>
            </span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="cell">
            <el-alert
              :title="`共${total}条记录`"
              type="info"
              show-icon
              :closable="false"
            />
          </div>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="number" label="企业编号" />
        <el-table-column prop="shortName" label="企业简称" />
        <el-table-column prop="tags" label="标签" />
        <el-table-column prop="creatorID" label="创建者" />
        <el-table-column prop="addDate" label="创建日期" />
        <el-table-column prop="remarks" label="备注" />
        <el-table-column prop="state" label="状态">
          <template v-slot="{ row }">
            <span v-if="row.state === 0">禁用</span>
            <span v-else>启用</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template v-slot="{ row }">
            <el-button
              style="margin-right: 5px"
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="edit(row)"
            />
            <el-button
              v-if="row.state === 0"
              type="success"
              icon="el-icon-check"
              circle
              plain
              @click="disable(row.id)"
            />
            <el-button
              v-else
              type="warning"
              icon="el-icon-close"
              circle
              plain
              @click="enable(row.id)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="deleteFn(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          :page-sizes="[10, 5, 2, 1]"
          :page-size="enterpriseList.pagesize"
          layout="->, prev,pager,next,sizes,jumper"
          :current-page="enterpriseList.page"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="operateprompt"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <i
          class="el-icon-warning-outline"
          style="
            color: rgb(230, 162, 60);
            font-size: 20px;
            vertical-align: middle;
          "
        />
        {{
          state === 0
            ? '已成功启用, 是否继续?'
            : state === 1
            ? '已成功禁用, 是否继续?'
            : '此操作将永久删除用户 , 是否继续?'
        }}
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="areYouSure"> 确 定 </el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="operationStatus ? '添加' : '编辑'"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="shutDown"
    >
      <span>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="企业名称" prop="shortName">
            <el-input v-model="ruleForm.shortName" />
          </el-form-item>
          <el-form-item label="所属公司" prop="company">
            <el-input v-model="ruleForm.company" />
          </el-form-item>
          <el-form-item label="" prop="">
            https://www.tianyancha.com （在此可查询所属公司全称及简称）
          </el-form-item>
          <el-form-item label="城市地区" prop="province">
            <el-select
              v-model="ruleForm.province"
              placeholder="请选择"
              style="margin-right: 40px; width: 250px"
              @change="citychoose"
            >
              <el-option
                v-for="item in province"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
            <el-select
              v-model="ruleForm.city"
              placeholder="请选择"
              style="margin-right: 40px; width: 250px"
              :disabled="!ruleForm.province"
            >
              <el-option
                v-for="item in city"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="方向（企业标签）" prop="tags">
            <el-input v-model="ruleForm.tags" />
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input
              v-model="ruleForm.remarks"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addoredit">
          {{ operationStatus ? '确认' : '保存' }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
import {
  getenterpriseListApi,
  managestateApi,
  deleteenterpriseApi,
  PostenterpriseApi,
  editenterpriseApi
} from '@/api/business'
export default {
  data() {
    return {
      state: 2,
      options: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      city: [],
      province: [
        {
          value: 1,
          label: '乌鲁木齐市'
        },
        {
          value: 0,
          label: '济南市'
        }
      ],
      value: '',
      total: null,
      tableData: [],
      // 请求企业管理列表
      enterpriseList: {
        page: 1,
        pagesize: 10,
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: null
      },
      operateprompt: false,
      id: '',
      // 添加或编辑的弹层
      dialogVisible: false,
      // 点击添加或编辑的状态 标识
      operationStatus: true,
      ruleForm: {
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
        isFamous: true
      },
      rules: {
        shortName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '请输入所属公司', trigger: 'blur' }
        ],
        province: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        city: [{ required: true, message: '请选择地区', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入企业方向', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getenterpriseList()
  },
  methods: {
    // 获取企业列表
    async getenterpriseList() {
      const { data } = await getenterpriseListApi(this.enterpriseList)
      // console.log(data)
      this.total = data.counts
      this.tableData = data.items
      this.tableData.forEach((ele) => {
        ele.addDate = moment(ele.addDate).format('YYYY-MM-DD')
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.enterpriseList.pagesize = val
      this.getenterpriseList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.enterpriseList.page = val
      this.getenterpriseList()
    },
    // 启用
    async disable(id) {
      this.id = id
      this.state = 0
      this.operateprompt = true
    },

    // 禁用
    async enable(id) {
      this.id = id
      this.state = 1
      this.operateprompt = true
    },
    // 删除
    deleteFn(id) {
      this.id = id
      this.state = 2
      this.operateprompt = true
    },
    // 取消
    cancel() {
      this.handleClose()
      this.shutDown()
    },
    // 关闭
    handleClose() {
      this.operateprompt = false
      this.$message('已取消操作')
    },
    // 操作确定
    async areYouSure() {
      if (this.state === 0) {
        await managestateApi(this.id, 1)
        this.$message.success('成功启用')
      } else if (this.state === 1) {
        await managestateApi(this.id, 0)
        this.$message.success('成功禁用')
      } else {
        await deleteenterpriseApi(this.id)
        this.$message.success('成功删除')
      }
      this.getenterpriseList()
      this.operateprompt = false
    },
    // 城市选择
    citychoose() {
      if (
        this.enterpriseList.province === '乌鲁木齐市' ||
        this.ruleForm.province === '乌鲁木齐市'
      ) {
        this.city = [
          {
            value: 1,
            label: '新市区'
          },
          {
            value: 2,
            label: '开发区'
          },
          {
            value: 3,
            label: '天山区'
          },
          {
            value: 4,
            label: '沙依巴克区'
          },
          {
            value: 5,
            label: '水磨沟区'
          }
        ]
        this.ruleForm.city = ''
        this.enterpriseList.city = ''
      } else if (
        this.enterpriseList.province === '济南市' ||
        this.ruleForm.province === '济南市'
      ) {
        this.city = [
          {
            value: 1,
            label: '历下区'
          },
          {
            value: 2,
            label: '市中区'
          },
          {
            value: 3,
            label: '槐荫区'
          },
          {
            value: 4,
            label: '天桥区'
          },
          {
            value: 5,
            label: '历城区'
          },
          {
            value: 6,
            label: '长青区'
          },
          {
            value: 7,
            label: '章丘区'
          },
          {
            value: 8,
            label: '济阳区'
          },
          {
            value: 9,
            label: '莱芜区'
          },
          {
            value: 10,
            label: '钢城区'
          }
        ]
        this.ruleForm.city = ''
        this.enterpriseList.city = ''
      } else {
        this.city = []
      }
    },
    // 搜索
    search() {
      this.getenterpriseList()
    },
    // 清除
    purge() {
      this.enterpriseList = {
        page: 1,
        pagesize: 10,
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: null
      }
      this.city = []
      this.getenterpriseList()
    },
    // 页面点击添加
    addTo() {
      this.dialogVisible = true
      this.operationStatus = true
    },
    // 编辑
    edit(row) {
      console.log(row.isFamous === 1)
      this.ruleForm = row
      this.ruleForm.isFamous = row.isFamous === 1
      this.dialogVisible = true
      this.operationStatus = false
    },
    // 关闭
    shutDown() {
      this.ruleForm = {
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
        isFamous: true
      }
      this.dialogVisible = false
    },
    async addoredit() {
      if (this.operationStatus) {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            await PostenterpriseApi(this.ruleForm)
            this.$message.success('添加成功')
            this.shutDown()
            this.getenterpriseList()
          }
        })
      } else {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            await editenterpriseApi(this.ruleForm)
            this.$message.success('编辑成功')
            this.shutDown()
            this.getenterpriseList()
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  padding: 20px;
  .content {
    padding: 20px;
    background-color: #fff;
    .el-row {
      margin-bottom: 20px;
    }
  }
}
</style>
